{include file="header/index" /}
	<div class="container whitebg user_management">
			<form class="form-inline mt15 mb15">
				<div class="form-group mr20">
					<input type="text" class="form-control input-min" id="tel" name="tel" value="{$search.tel}" placeholder="请输入账号">
				</div>
				<div class="form-group mr20">
					<input type="text" class="form-control input-min" id="username" name="username" value="{$search.username}" placeholder="请输入户名">
				</div>
				<div class="form-group mr20">
					<input type="text" class="form-control input-min" id="telphone" name="telphone" value="{$search.telphone}" placeholder="请输入联系人电话">
				</div>
				<div class="form-group mr20">
					<input type="text" class="form-control input-max" id="id_card" name="id_card" value="{$search.id_card}" placeholder="请输入身份证号码">
				</div>
				<div class="form-group mr20">
					<input type="text" class="form-control input-max" id="remark" name="remark" value="{$search.remark}" placeholder="请输入备注信息">
				</div>
			</form>
			
			<form class="form-inline mt15 mb15">
				<div class="form-group mr20">
					<label>用户类型</label>
					<select id="user_type" name="user_type" class="form-control input-min">
						<option value="">请选择用户类型</option>
						<option value="1">普通用户</option>
						<option value="2">VIP用户</option>
					</select>
					<select id="is_entry" name="is_entry" class="form-control input-min">
						<option value="">请选择客户类型</option>
						<option value="2">客户</option>
						<option value="1">入职客户</option>
						<option value="3">离职客户</option>
					</select>
				</div>
				<div class="form-group mr20">
					<label>所属运营中心</label>
					<select id="operation" name="" onChange="move()" class="form-control input-min">
						<option value="">请选择运营中心</option>
						{volist name="operation" id="op"}
						<option value="{$op.o_id}">{$op.company_name}</option>
						{/volist}
	
					</select>
					<select id="administrative" name="" class="form-control input-min">
						<option value="">请选择行政中心</option>
	
					</select>
				</div>	
					<button type="button" id="search" class="btn btn-default input-Btn">搜索</button>
					
					
					<button type="button" class="btn btn-primary fr add_newuser input-Btn">
						<a href="{:url('Customerinfo/add')}">
							<i class="glyphicon glyphicon-plus"></i>&nbsp;&nbsp;新增用户
						</a>
					</button>
					<button id="drUser" type="button" class="mr20 btn btn-primary fr add_newuser input-Btn" data-toggle="modal" data-target="#addOldUser">
						<i class="glyphicon glyphicon-plus"></i>&nbsp;&nbsp;导入用户
					</button>
										
			</form>

			<form id="form1"  method="Post">		
				<table class="table table-bordered">
					<tr>
						<th><input type="checkbox" onclick="checkAll(this)" id="all" /></th>
						<th>账号</th>
						<th>户名</th>
						<th>客户类型</th>
						<th>客户电话</th>
						<th>身份证号</th>					
						<th>所属运营中心</th>
						<th>所属行政中心</th>
						<th>账户状态</th>
						<th>操作</th>
					</tr>
					<script id="list-template" type="text/html">
						{{# for(var i=0;i<d.length;i++){  }}
						<tr>
							<td><input class="select" type="checkbox" name="box" value="{{d[i].user_id}}" onclick="selectAll()" /></td>
							<td>{{d[i].telphone}}</td>
							<td>{{d[i].username}}</td>
							{{# if(d[i].user_type==1){ }}
								<td>普通用户</td>
							{{# }else{ }}
								<td>VIP用户</td>
								{{# } }}
							<td>{{d[i].telphone}}</td>
							<td>{{d[i].id_card}}</td>
							<td>{{d[i].operation_companyname}}</td>
							<td>{{d[i].administrative_companyname}}</td>
							<td>{{d[i].account_status}}</td>
							<td>
							<a href="{:url('Customerinfo/details')}?user_id={{d[i].user_id}}">查看</a>
							<a href="{:url('Customerinfo/update')}?user_id={{d[i].user_id}}">修改</a>
							{if condition="isset($admin) AND $admin"}
								<a href="{:url('Customerinfo/Share')}?user_id={{d[i].user_id}}">共享</a>
							{/if}
							</td>
						</tr>
						{{# } }}
					</script>
					<tbody id="list-content"></tbody>
				</table>
			</form>
		   <div class="clearfix" style="float:right;margin: 0 auto;">
		        <span class="fl mt5" id="count">共{$count}条数据</span><span id="allpage"  class="fl  mr20 mt5"></span><span  class="fl" id="AjaxPage"></span>
		    </div>
		    <!-- 加载动画 -->
		    <div class="spiner-example">
		        <div class="sk-spinner sk-spinner-three-bounce">
		            <div class="sk-bounce1"></div>
		            <div class="sk-bounce2"></div>
		            <div class="sk-bounce3"></div>
		        </div>
		    </div>						
			<div class="batchdelbtn" onclick="del()">批量删除</div>
			<div class="recyclebtn">回收站</div>
			<div class="clearfix"></div>
		</div>


		<!--addOldUser Modal -->
		<div class="modal fade" id="addOldUser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">导入用户数据</h4>
		        <h6 class="redcolor">请确保上传Excel为所选行政区域数据！</h6>
		      </div>
		    <form action="{:url('addOldUser')}" method="post" enctype="multipart/form-data" onsubmit="onSub()">		    	
		      <div class="modal-body">
		      	<div class="row">
					<div class="col-sm-6">
						<label>所属行政中心</label>
						<select id="administrative" name="administrative" class="form-control input-min" required="required">
							<option value="">请选择行政中心</option>
							{volist name="ainfo" id="op"}
							<option value="{$op.a_id}">{$op.company_name}</option>
							{/volist}
						</select>
					</div>
					<div class="col-sm-6">
						<label>导入关系</label>
						<select id="relationship" name="relationship" class="form-control input-min" required="required">
							<option value="">请选择关系</option>
							<option value="1">第一步-家用客户</option>
							<option value="4">第二步-商用客户</option>
							<option value="2">第二步-入职客户</option>
							<option value="3">第三步-推荐关系</option>
							<!--<option value="5">特殊导入</option>-->
						</select>
					</div>
				</div>
				<label>用户归属地</label>
				<div class="row">
		      		<div class="col-sm-4">		      			
						<select class="form-control input-min" name="province" id="_province" required="required" onchange="showcity()">
							<option value="">--请选择省份--</option>
						</select>
		      		</div>
		      		<div class="col-sm-4">
						<select class="form-control input-min" id="_city" name="city" required="required" onchange="showareas()">
							<option value="">--请选择城市--</option>
						</select>
		      		</div>
		      		<div class="col-sm-4">
		      			<select class="form-control input-min" id="_area" required="required" name="area">
							<option value="">--请选择区/县--</option>
						</select>
		      		</div>
		      	</div>
				
				<label for="excel" id='upload'>点击上传(仅支持Excel文件上传)</label>
				<input type="file" name="excel" id="excel" required="required">
		      </div>
		      
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">取消<button>
		        <button type="submit" class="btn btn-primary">提交</button>
		      </div>
		    </form>
		    </div>
		  </div>
		</div>
	</body>
</html>
<script type="text/javascript">
	//table奇数行颜色
	//$(document).ready(function() {
		//$('tr:odd').addClass('active');
	//});

	function onSub() {
		var index=top.layer.load(1, {
			  shade: [0.1,'#fff'] //0.1透明度的白色背景
			});
		// setTimeout(function() {
			if($(".layui-layer-move").length==0){
			top.layer.close(index)}
		// },500); 
	}

    Ajaxpage();
    function Ajaxpage(curr){
        var operation = $("#operation ").val();
        var administrative = $("#administrative ").val();
        var user_type = $('#user_type').val();
        var tel = $('#tel').val();
        var username = $('#username').val();
        var telphone = $('#telphone').val();
        var id_card = $('#id_card').val();
        var remark = $('#remark').val();
        var is_entry = $('#is_entry').val();
        $.getJSON('{:url("Customerinfo/index")}', {page: curr || 1,remark:remark,is_entry:is_entry,tel:tel,user_type:user_type,username:username,telphone:telphone,id_card:id_card,operation_id:operation,administrative_id:administrative}, function(data){
//           console.log(data);

            $(".spiner-example").css('display','none'); //数据加载完关闭动画
            $('#count').html("共"+data.page.count+"条数据");

            //ajax刷新页面
			var tpl = document.getElementById('list-template').innerHTML;
			laytpl(tpl).render(data.data, function(html){
				document.getElementById('list-content').innerHTML = html;
			});
			laypage({
				cont: $('#AjaxPage'),//容器。值支持id名、原生dom对象，jquery对象,
				pages:data.page.lastPage,//总页数
				skip: true,//是否开启跳页
				skin: '#337ab7',//分页组件颜色
				curr: curr || 1,
				first: '首页', //若不显示，设置false即可
				last: '尾页', //若不显示，设置false即可
				groups: 3,//连续显示分页数
				jump: function(obj, first){
					if(!first){
						Ajaxpage(obj.curr)
					}
					$('#allpage').html('，第'+ obj.curr +'页，共'+ '<i>'+obj.pages+'</i>' +'页');
					inputlength();
				}
			});
			if(data.data==''){
                $("#list-content").html('<td colspan="20" style="padding-top:10px;padding-bottom:10px;font-size:16px;text-align:center">暂无数据</td>');
                $('#allpage').html('');
			}

        });
       
    }


	//复选框选中
	function checkAll(obj) {
		//alert(obj.checked);
		//获取name=box的复选框
		var userids = document.getElementsByName("box");
		//alert(userids.length);
		for(var i = 0; i < userids.length; i++) {
			userids[i].checked = obj.checked;
		}
	}

	function selectAll() {
		//获取name=box的复选框
		var userids = document.getElementsByName("box");
		var count = 0;
		//遍历所有的复选框
		for(var i = 0; i < userids.length; i++) {
			if(userids[i].checked) {
				count++;
			}
		}
		//选中复选框的个数==获取复选框的个数 
		if(count == userids.length) {
			//设置id为all复选框选中
			document.getElementById("all").checked = true;
		} else {
			//设置id为all复选框不选中
			document.getElementById("all").checked = false;
		}
	}

	//删除(支持批量删)
	function del() {
		top.layer.confirm('您确认要删除吗？', {
		  btn: ['确定','取消'] //按钮
		}, function(){
			var str = [];
	        $.each($('input:checkbox:checked'),function(){
	            str.push($(this).val());
	        });
		  $.get("{:url('Customerinfo/delete')}",{data:str},function (data) {
		  	if(data){
		  		top.layer.msg(data.msg, {time: 1000,icon: 1});
		    	Ajaxpage();
		  	}
		  	}); 
        
		});
    }

	//搜索
	$('#search').click(function () {
        Ajaxpage();
    });

	//选择地址
	function move() {
		var operation = $("#operation").val();
//        console.log(operation);
		$.get("{:url('Customerinfo/selectAdministrative')}",{operation:operation},function (data) {
            $("#administrative").empty();
            $("#administrative").append($("<option>").val("").text("请选择行政中心"));
            for (var i = 0;i<data.length;i++){
                var option = $("<option>").val(data[i].a_id).text(data[i].company_name);
                $("#administrative").append(option);
			}

        })
    }

    $("#drUser").click(function (){
        // ajax 请求 获取省数据
		$.getJSON("{:url('/admin/Three/province')}",{}, function (data){
            $("#_province").html('');
            var str = '<option value="">--请选择省份--</option>';
            $.each(data, function(key, val) {
                str += '<option value="' + val.id + '" >' + val.area_name + '</option>';
            })
            $("#_province").html(str);
		});
//        $.post("{:url('/admin/Three/province')}", {}, function(data) {
//            console.log(111);
//            $("#_province").html('');
//            var str = '<option value="">--请选择省份--</option>';
//            $.each(data, function(key, val) {
//                str += '<option value="' + val.id + '" >' + val.area_name + '</option>';
//            })
//            $("#_province").html(str);
//        }, 'json');
	});

	// 三级联动
//    $(function() {
//        // ajax 请求 获取省数据
//        $.post("{:url('/admin/Three/province')}", {}, function(data) {
//            console.log(data);
//            $("#_province").html('');
//            var str = '<option value="">--请选择省份--</option>';
//            $.each(data, function(key, val) {
//                str += '<option value="' + val.id + '" >' + val.area_name + '</option>';
//            })
//            $("#_province").html(str);
//        }, 'json');
//
//    });

    // 获取市数据
    function showcity() {
        // 获取选中省 对应的id
        var id = $("#_province option:selected").val();
        var str = '<option value="">--请选择城市--</option>';
        var str1 = '<option value="">--请选择区/县--</option>';
        $("#_city").html(str);
        $("#_area").html(str1);
        //发送ajax请求  获取省对应的市
        $.getJSON("{:url('/admin/Three/city')}", {
            parent_id: id
        }, function(data) {
            $("#_city").html('');
            var str = '<option value="">--请选择城市--</option>';
            $.each(data, function(k, v) {
                str += '<option value="' + v.id + '">' + v.area_name + '</option>';
            })
            $("#_city").html(str);
        });
    }
    // 获取 区/县数据
    function showareas() {
        // 获取选中市 对应的id
        var id = $("#_city option:selected").val();
        // 发送ajax请求 获取市对应的区县
        $.getJSON("{:url('/admin/Three/areas')}", {
            city_id: id
        }, function(data) {
            $("#_area").html('');
            var str = '<option value="">--请选择区/县--</option>';
            $.each(data, function(k, v) {
                str += '<option value="' + v.id + '">' + v.area_name + '</option>';
            });
            $("#_area").html(str);
        })
    }
	
</script>